<template>
	<div class="bear-ApiTable">
		<div v-for="(item,index) in data" :key="index">
			<div>{{item.title}}</div>
			<TablePowerful :columns="item.type?typeColumns:columns" :data="item.value" border disabled-hover>
				<template #set="{row}">
					<template v-if="row.set">
						<iSwitch v-if="row.type==='Boolean'" v-model="bind[row.set.bind]" size="small"/>
						<iSelect v-else-if="row.set.type==='select'" v-model="bind[row.set.bind]" size="small" transfer>
							<iOption v-for="item in row.set.options" :value="item" :key="item">{{item}}</iOption>
						</iSelect>
						<InputNumber v-else-if="row.set.type==='number'" v-model="bind[row.set.bind]" size="small" style="width:100%"/>
						<iInput v-else-if="row.set.type==='input'" v-model="bind[row.set.bind]" size="small"/>
					</template>
				</template>
			</TablePowerful>
		</div>
	</div>
</template>

<script>
	import TablePowerful from '../../components/TablePowerful';
	import utils from '../../js/utils';
	window.utils=utils;
	export default{
		name:'ApiTable',
		components:{
			TablePowerful
		},
		props:{
			data:Array,
			bind:Object
		},
		data(){
			return {
				columns:[
					{title:'名称',key:'name',width:180},
					{title:'说明',key:'info'},
					{title:'类型',key:'type',width:180},
					{title:'默认值',key:'def',width:180},
					{title:'设值',slot:'set',width:180}
				],
				typeColumns:[
					{title:'名称',key:'name',width:180},
					{title:'说明',key:'info'},
					{title:'类型',key:'type',width:180}
				]
			};
		}
	};
</script>

<style lang="scss">
	.bear-ApiTable{
		margin:20px;
		>div{
			&:not(:last-child){
				margin-bottom:20px;
			}
			>div:first-child{
				position:relative;
				font-size:15px;
				height:30px;
				line-height:30px;
				color:#333;
				padding-left:12px;
				margin-left:10px;
				&:after{
					content:'';
					position:absolute;
					width:5px;
					height:5px;
					background:#000;
					border-radius:50%;
					left:0;
					top:12px;
				}
			}
		}
	}
</style>
